<template>
    <div class="regist">
        <!-- 顶部 -->
        <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <!-- 表单 -->
        <van-cell-group inset>
            <van-field v-model="sms" :rules="[{ validator, message: '请输入正确内容' }]" name="tel" center clearable
                label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button v-if="isshow" @click="submitFn" size="small" round type="danger">发送验证码</van-button>
                    <van-button v-else :disabled="!isshow" @click="submitFn" size="small" round type="danger">
                        <van-count-down :time="time" @finish="isshow=true">
                            <template #default="timeData">
                                <span class="block">{{ timeData.seconds }}s 后再次发送</span>
                            </template>
                        </van-count-down>
                    </van-button>
                </template>
            </van-field>
        </van-cell-group>
        <!-- 下一步按钮 -->
        <div style="margin: 10px 30px;">
            <van-button @click="checkcodeFn" :disabled="!validator(sms)" round block type="danger" native-type="submit">
                下一步
            </van-button>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入注册页面接口
import { sendmsgcode,docheckcode } from '@/api/registapi'
// 引入创建路由对象以及当前路由对象的方法
import { useRoute } from 'vue-router'
import {useRouter} from 'vue-router'
let sms = ref<string>('')    // 输入的验证码
let validator = (val: string) => /^\d{5}$/.test(val);  // 校验验证码所填位数，判断是否可以点击下一步
// 创建当前路由对象以及路由对象
const route = useRoute()
const router=useRouter()
let tel: any = route.query.tel    // 注册页面1传递过来的输入的手机号
let isshow = ref(true)            // 显示发送验证码按钮还是显示验证码发送倒计时按钮 以及 是否禁用
const time = ref(10 * 1000);      // 倒计时时间
// 点击发送验证码按钮
let submitFn = () => {
    // 验证码发送倒计时按钮的 显示 以及禁用
    isshow.value = false
    // console.log(time.value);
    // 调用发送验证码接口
    sendmsgcode({ tel: tel }).then((res:any) => {
        // console.log('发送验证码接口', res);
    })
}
// 点击下一步按钮
let checkcodeFn=()=>{
    // 调用验证验证码的接口
    docheckcode({tel:tel,telcode:sms.value}).then((res:any)=>{
        // console.log('验证验证码接口数据',res);
        if(res.code==200){
            // 验证码正确，跳转到注册第三步页面
            router.push({path:'/register/step3',query:{tel:tel}})
        }
    })
}





</script>
<style scoped>
.van-cell-group {
    padding: 50px 0px;
}

.van-count-down {
    color: #fff;
}
.regist{
    background-color: #fff;
    height: 100%;
}
</style>
